<template>
  <view class="pay-success-page view">
    <!-- 支付成功提示 -->
    <view class="pay-success" v-if="showPaySuccess">
      <uni-icons type="checkbox-filled" size="35" color="#0DBC79"></uni-icons>
      <text class="success-text">支付成功</text>
      <text class="success-tip">您的订单已支付成功，我们将尽快为您发货</text>
    </view>

    <!-- 快递状态 -->
    <view class="goods-status">
      <view class="status-title">快递状态</view>
      <view class="status-content">
        <text class="status-text">您的订单已打包，等待发货</text>
        <text class="status-time">预计送达时间：2025-03-31</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="pay-info">
      <view class="info-title">订单信息</view>
      <view class="info-content">
        <view class="info-item">
          <text class="item-label">订单编号：</text>
          <text class="item-value">{{ payment.order.id }}</text>
        </view>

        <view class="info-item">
          <text class="item-label">订单金额：</text>
          <text class="item-value">￥{{ payment.order.total_price }}</text>
        </view>

        <view class="info-item">
          <text class="item-label">运费金额：</text>
          <text class="item-value">￥{{ payment.order.total_logistics }}</text>
        </view>

        <view class="info-item">
          <text class="item-label">支付金额：</text>
          <text class="item-value">￥{{ payment.order.real_price }}</text>
        </view>

        <view class="info-item">
          <text class="item-label">收件人：</text>
          <text class="item-value">{{ payment.order.address.consignee }}</text>
        </view>

        <view class="info-item">
          <text class="item-label">收件人联系方式：</text>
          <text class="item-value">{{ payment.order.address.phone_number }}</text>
        </view>

        <view class="info-item">
          <text class="item-label">收件所属地：</text>
          <text class="item-value">
            {{ formatAddress(payment.order.address.province_city_district) }}
          </text>
        </view>
        <view class="info-item">
          <text class="item-label">详细地址：</text>
          <text class="item-value">
            {{ payment.order.address.address_detail }}
          </text>
        </view>

        <view class="info-item">
          <text class="item-label">下单时间：</text>
          <text class="item-value">{{ formatTime(payment.order.create_time) }}</text>
        </view>

        <view class="info-item">
          <text class="item-label">支付时间：</text>
          <text class="item-value">{{ formatTime(payment.create_time) }}</text>
        </view>

        <!-- 联系客服 -->
        <view class="info-item">
          <view></view>
          <view class="contact-btn" @click="handleContact">联系客服</view>
        </view>
      </view>
    </view>

    <!-- 热门商品 -->
    <mHostGoods></mHostGoods>
  </view>
</template>

<script>
import mHostGoods from '../../components/mHostGoods/index.vue'
import { formatTime } from '../../utils/formatDate'
import formatAddress from '../../utils/formatAddress'

export default {
  components: {
    mHostGoods
  },
  data() {
    return {
      payId: 0,
      payment: {
        create_time: new Date().getTime(),
        order: {
          create_time: new Date().getTime(),
          address: {
            province_city_district: '//'
          }
        }
      },
      showPaySuccess: true,
      formatTime,
      formatAddress
    }
  },
  onLoad(option) {
    // console.log(getApp().globalData.payId)
    // console.log(getApp().globalData)
    this.payId = getApp().globalData.payId
    if (typeof option.flag != 'undefined') {
      this.showPaySuccess = JSON.parse(option.flag)
    }
    this.getData()
  },
  methods: {
    async getData() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getPaymentById/' + this.payId,
        header: getApp().globalData.header
      })

      if (res.status != 200) {
        this.$checkStatus(res.status)
        return
      }

      this.payment = res.data
      // console.log(res)
    },

    // 联系客服
    handleContact() {
      uni.showToast({
        title: '联系客服',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.pay-success-page {
  padding: 30upx;
  background-color: #f8f8f8;
}

.pay-success {
  text-align: center;
  padding: 40upx 0;
  background-color: #fff;
  border-radius: 20upx;
  margin-bottom: 30upx;
  box-shadow: $def-shadow;

  .success-icon {
    width: 120upx;
    height: 120upx;
    margin-bottom: 20upx;
  }

  .success-text {
    font-size: 36upx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10upx;
  }

  .success-tip {
    font-size: 28upx;
    color: #666;
  }
}

.goods-status {
  background-color: #fff;
  border-radius: 20upx;
  padding: 30upx;
  margin-bottom: 30upx;
  box-shadow: $def-shadow;

  .status-title {
    font-size: 32upx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20upx;
  }

  .status-content {
    font-size: 28upx;
    max-height: 400upx;
    color: #666;

    .status-text {
      display: block;
      margin-bottom: 10upx;
    }

    .status-time {
      color: #f60;
    }
  }
}

.pay-info {
  background-color: #fff;
  border-radius: 20upx;
  padding: 30upx;
  margin-bottom: 30upx;
  box-shadow: $def-shadow;

  .info-title {
    font-size: 32upx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20upx;
  }

  .info-content {
    font-size: 28upx;
    color: #666;

    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15upx;

      .item-label {
        color: #999;
      }

      .item-value {
        color: #333;
      }
    }
  }
}

.contact-btn {
  margin-top: 40upx;
  width: 180upx;
  height: 80upx;
  background-color: #a9abad;
  color: #fff;
  font-size: 32upx;
  border-radius: 50upx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
